<template>
  <div class="home">
    <h1>欢迎使用工具类网站</h1>
    <p class="description">这里提供各种实用的在线工具，帮助您提高工作效率</p>
    
    <div class="tool-categories">
      <div class="category" v-for="(category, index) in categories" :key="index">
        <h2>{{ category.title }}</h2>
        <div class="tools-grid">
          <router-link 
            v-for="(tool, idx) in category.tools" 
            :key="idx" 
            :to="tool.path" 
            class="tool-card"
          >
            <div class="tool-icon">
              <i class="fa" :class="getToolIcon(tool.title)"></i>
            </div>
            <h3>{{ tool.title }}</h3>
            <p>{{ tool.description }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      categories: [
        {
          title: '代码工具',
          tools: [
            { 
              title: 'JSON格式化', 
              path: '/tools/json-format',
              description: '格式化和验证JSON数据，支持树形结构编辑'
            },
            { 
              title: '代码美化', 
              path: '/tools/code-beautify',
              description: '美化HTML、CSS、JavaScript等代码'
            }
          ]
        },
        {
          title: '图像工具',
          tools: [
            { 
              title: '图像压缩', 
              path: '/tools/image-compress',
              description: '无损压缩图片，减小文件体积'
            },
            { 
              title: '格式转换', 
              path: '/tools/image-convert',
              description: '转换图片格式，支持JPG、PNG、WebP等'
            },
            { 
              title: 'ico转换', 
              path: '/tools/logo-to-ico',
              description: '转换ico格式，支持PNG、JPG、SVG等常见格式'
            }
          ]
        },
        {
          title: '加密工具',
          tools: [
            { 
              title: '加密解密', 
              path: '/tools/encrypt',
              description: '支持多种加密算法，保护您的敏感信息'
            }
          ]
        },
        {
          title: '数据工具',
          tools: [
            { 
              title: 'Excel数据分配器', 
              path: '/tools/excel-viewer',
              description: '上传Excel文件查看数据，支持字段统计和数据处理'
            }
          ]
        }
      ]
    }
  },
  methods: {
    getToolIcon(title) {
      const iconMap = {
        '文本转换': 'fa-exchange',
        '文本对比': 'fa-columns',
        '正则测试': 'fa-search',
        'JSON格式化': 'fa-sitemap',
        '代码美化': 'fa-indent',
        '图像压缩': 'fa-compress',
        '格式转换': 'fa-refresh',
        '加密解密': 'fa-key',
        'Excel查看器': 'fa-file-excel-o'
      }
      return iconMap[title] || 'fa-wrench'
    }
  }
}
</script>

<style scoped>
.home {
  padding: 2rem 0;
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1rem;
}

.description {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
}

.tool-categories {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.category h2 {
  font-size: 1.8rem;
  color: #3498db;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eee;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tool-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.tool-icon {
  width: 60px;
  height: 60px;
  background-color: #f0f9ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.tool-icon .icon {
  font-size: 1.5rem;
  color: #3498db;
}

.tool-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.tool-card p {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

.tool-icon .fa {
  font-size: 1.5rem;
  color: var(--accent-color);
}
</style>